<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="top_navgation">
      <a-row class="top_search">
        <a-col :span="12" style="padding-top: 8px">
          <div>
            <ul style="display: flex">
              <li @click="doLogin" style="font-size: 11px; font-weight: 200">
                <router-link to="/"
                  ><HomeOutlined
                    style="margin-right: 5px; padding-top: 4px; color: coral"
                  />首页</router-link
                >
              </li>
              <li style="margin-left: 20px; font-size: 11px; font-weight: 200">
                <router-link to="/register"
                  ><SendOutlined
                    style="margin-right: 5px; padding-top: 4px; color: coral"
                  />免费注册</router-link
                >
              </li>
            </ul>
          </div>
        </a-col>
        <a-col
          :span="12"
          style="padding-top: 8px; display: flex; justify-content: center"
        >
          <div>
            <ul style="display: flex">
              <li style="margin-left: 20px; font-size: 11px; font-weight: 200">
                <router-link @click="toCart" to=""
                  ><ShoppingCartOutlined
                    style="margin-right: 5px; padding-top: 4px; color: coral"
                  />购物车</router-link
                >
              </li>
              <li style="margin-left: 20px; font-size: 11px; font-weight: 200">
                <a-dropdown>
                  <router-link to="/"
                    ><StarOutlined
                      style="margin-right: 5px; padding-top: 4px; color: coral"
                    />收藏夹 <DownOutlined style="color: coral" />
                  </router-link>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <router-link style="font-size: 10px" to="/collectgoods"
                          >收藏的宝贝</router-link
                        >
                      </a-menu-item>
                      <a-menu-item>
                        <router-link style="font-size: 10px" to="/collectstores"
                        >收藏的店铺</router-link
                      >
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </li>
              <li
                @click="toPersonal"
                style="margin-left: 20px; font-size: 11px; font-weight: 200"
              >
                <router-link to="/"
                  ><DesktopOutlined
                    style="margin-right: 5px; padding-top: 4px; color: coral"
                  />个人中心</router-link
                >
              </li>
            </ul>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 顶部搜索框 -->
    <div class="top_serach">
      <div style="padding-top: 15px; display: flex">
        <div style="padding-left: 100px; margin-right: 100px">
          <router-link to="/">
            <a-image
              :width="200"
              :preview="false"
              src="https://pic.imgdb.cn/item/65564497c458853aeffcd358.png"
            />
          </router-link>
        </div>
        <div style="width: 55%; height: 80px; padding: 15px">
          <a-steps
            size="small"
            :current="2"
            label-placement="vertical"
            :items="items"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import {
  StarOutlined,
  ShoppingCartOutlined,
  OrderedListOutlined,
  DownOutlined,
  DesktopOutlined,
  SendOutlined,
  HomeOutlined,
} from "@ant-design/icons-vue";
import { useAuthorizationStore } from "@/stores/authorization";
import router from "@/router";
const authorizationStore = useAuthorizationStore();

//跳往个人中心
function toPersonal() {
  if (authorizationStore.authorization) {
    router.push("/personal");
  } else {
    router.push("/login");
  }
}

//跳往购物车
function toCart() {
  if (authorizationStore.authorization) {
    router.push("/cart");
  } else {
    router.push("/login");
  }
}

const items = ref([
  {
    title: "清空购物车",
  },
  {
    title: "拍下商品",
  },
  {
    title: "支付",
  },
  {
    title: "确认收货",
  },
  {
    title: "评价",
  },
]);
</script>

<style scoped>
a:hover {
  color: red;
}
.top_navgation {
  height: 35.8px;
  background-color: #f4f4f5;
  color: #303133;
  margin-left: 150px;
  margin-right: 150px;
}
.top_search {
  display: flex;
}
.top_serach {
  height: 121px;
  background-color: #fff;
}

ul {
  list-style-type: none;
}

:deep(.slick-slide) {
  height: 310px;
  background: #364d79;
  overflow: hidden;
  border-radius: 10px;
}
</style>
